<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<tag:head title="${requestScope.friend.name}的历史借阅" ctx="${ctx}">
</tag:head>

<tag:body>
	<!-- 左 上 导航 -->
	<tag:nav ctx="${ctx}"></tag:nav>

	<!-- page content -->
	<div class="right_col" role="main">
		<div class="">
			<div class="clearfix"></div>

			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>${requestScope.friend.name}的历史借阅</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table id="datatable-checkbox" class="table table-striped table-bordered bulk_action">
								<thead>
									<tr>
									<th width="5%">序号</th>
									<th width="10%" style="display: none">图书号</th>
									<th width="20%">图书名称</th>
									<th width="10%">类别</th>
									<th width="15%">作者</th>
									<th width="15%">出版社</th>
									<th width="10%">封面图</th>
									<th>操作</th>
								</tr>
								</thead>

								<tbody>
									<c:forEach var="book" items="${requestScope.books}" varStatus="status">
										<tr>
											<td width="5%">${status.index + 1}</td>
											<td style="display: none;">${book.bookId}</td>
											<td width="20%">${book.name}</td>
											<td width="10%">${book.bookClass.name}</td>
											<td width="15%">${book.author}</td>
											<td width="15%">${book.publish}</td>
											<td width="5%"><a href="#" data-toggle='modal' data-target='.bigImage' onclick="bigImage(this)"><img src="${ctx}/${book.bookImage}" class="avatar"></a></td>
											<td><a href='#' class='btn btn-info btn-xs' onclick='bookInfo(this)'>
													<i class='fa fa-pencil'></i>
													查看
											</a></td>
										</tr>
								</c:forEach>
								</tbody>
							</table>
							<div class="dataTables_paginate paging_simple_numbers" id="datatable-checkbox_paginate">
								<ul class="pagination">
									<li class="paginate_button previous disabled" id="datatable-checkbox_previous">
										<a href="javascript:void(0)" aria-controls="datatable-checkbox" data-dt-idx="0" tabindex="0">上一页</a>
									</li>
									<li class="paginate_button next disabled" id="datatable-checkbox_next">
										<a href="javascript:void(0)" aria-controls="datatable-checkbox" data-dt-idx="2" tabindex="0">下一页</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>


		</div>
	</div>
	<!-- /page content -->

	<!-- footer content -->
	<tag:footer></tag:footer>
</tag:body>
<!-- javascript -->
<tag:javascript ctx="${ctx}">
	<!-- this page -->
	<script src="${ctx}/assets/js/staff/staff_friend_history/staff_friend_history.js"></script>
	<script>
		<c:if test="${requestScope.error != null}">
		createPNotify("提示信息","error","${requestScope.error}");
		</c:if>

		initTable();

		<c:choose>
			<c:when test="${requestScope.page.pageSize == 10 || requestScope.page.pageSize == 50 || requestScope.page.pageSize == 25 || requestScope.page.pageSize == 100}">
				$("#pageSize").val(${requestScope.page.pageSize});
			</c:when>
		<c:otherwise>
			$("#pageSize").val("all");
		</c:otherwise>
		</c:choose>

		createPaging($('#datatable-checkbox_paginate'),${requestScope.page.currentPageNum},${requestScope.page.totalPageNum},'friendHistory(this,'+ '${requestScope.friend.staffId})',10);
		adjustPagination($("#datatable-checkbox_paginate").children("ul"),${requestScope.page.currentPageNum},${requestScope.page.totalPageNum});

	</script>
</tag:javascript>
</html>

<!-- start:bigImage -->
<div class="modal fade bigImage" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<img src="" width="300px" height="300px">
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>

		</div>
	</div>
</div>
<!-- end:bigImage -->